<template>
  <div>
    <!-- 头部事件 -->
    <div class="campus-enterprise-hearder">
      <div class="campus-enterprise-hearder-form">
        <el-form :inline="true">
          <el-form-item label="职位搜索">
            <el-input
              v-model="searchVal"
              placeholder="输入职位名称试试"
              style="width: 150px"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="searchPosition"
              >搜索</el-button
            >
          </el-form-item>
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            class="campus-enterprise-hearder-add"
            @click="popAddForm"
            >添加</el-button
          >
        </el-form>
      </div>
    </div>
    <el-table
      :data="tableData"
      empty-text="啥也没有"
      style="width: 1150px"
      max-height="800"
      highlight-current-row
      stripe
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      class="campus-enterprise-table"
    >
      <el-table-column prop="name" fixed="left" label="名称" width="120">
      </el-table-column>
      <el-table-column prop="pnumbers" label="需求量" width="120">
      </el-table-column>
      <el-table-column prop="paddress" label="地址" width="120">
      </el-table-column>
      <el-table-column prop="peducation" label="学历" width="120">
      </el-table-column>
      <el-table-column prop="psalary" label="薪资" width="120">
      </el-table-column>
      <el-table-column label="描述" width="200">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>具体描述: {{ scope.row.pdesc }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.pdesc }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-button
            size="mini"
            icon="el-icon-edit"
            @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            icon="el-icon-delete"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页插件 -->
    <div class="campus-enterprise-page">
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page="pageInfo.current"
        :page-size="pageInfo.pageSize"
        :page-count="11"
        :hide-on-single-page="true"
        :total="total"
        @current-change="clickQueryByPage"
      >
      </el-pagination>
    </div>
    <!-- 添加职位对话框 -->
    <el-dialog
      title="发布职位"
      :visible.sync="dialogAddFormVisible"
      modal
      :append-to-body="true"
    >
      <el-form :model="addPositionForm" :inline="true">
        <el-form-item label="职位名称" :label-width="formLabelWidth">
          <el-input
            v-model="addPositionForm.name"
            autocomplete="off"
            style="width: 120px"
          ></el-input>
        </el-form-item>
        <el-form-item label="公司名称" :label-width="formLabelWidth">
          <el-input
            v-model="addPositionForm.company"
            autocomplete="off"
            style="width: 120px"
          ></el-input>
        </el-form-item>
        <el-form-item label="需求人数" :label-width="formLabelWidth">
          <el-input
            v-model="addPositionForm.pnumbers"
            autocomplete="off"
            style="width: 120px"
          ></el-input>
        </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth">
          <el-input
            v-model="addPositionForm.paddress"
            autocomplete="off"
            style="width: 120px"
          ></el-input>
        </el-form-item>
        <el-form-item label="学历要求" :label-width="formLabelWidth">
          <el-input
            v-model="addPositionForm.peducation"
            autocomplete="off"
            style="width: 120px"
          ></el-input>
        </el-form-item>
        <el-form-item label="薪资" :label-width="formLabelWidth">
          <el-input
            v-model="addPositionForm.psalary"
            autocomplete="off"
            style="width: 120px"
          ></el-input>
        </el-form-item>
        <el-form-item label="岗位描述" :label-width="formLabelWidth">
          <el-input
          type="textarea"
            v-model="addPositionForm.pdesc"
            autocomplete="off"
            style="width: 120px"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAddFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addPosition">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 编辑对话框 -->
    <el-dialog
      title="更新职位"
      :visible.sync="dialogEditFormVisible"
      modal
      :append-to-body="true"
    >
      <el-form :model="editPositionForm" :inline="true">
        <el-form-item label="职位名称" :label-width="formLabelWidth">
          <el-input
            v-model="editPositionForm.name"
            autocomplete="off"
            style="width: 120px"
          ></el-input>
        </el-form-item>
        <el-form-item label="需求人数" :label-width="formLabelWidth">
          <el-input
            v-model="editPositionForm.pnumbers"
            autocomplete="off"
            style="width: 120px"
          ></el-input>
        </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth">
          <el-input
            v-model="editPositionForm.paddress"
            autocomplete="off"
            style="width: 120px"
          ></el-input>
        </el-form-item>
        <el-form-item label="学历要求" :label-width="formLabelWidth">
          <el-input
            v-model="editPositionForm.peducation"
            autocomplete="off"
            style="width: 120px"
          ></el-input>
        </el-form-item>
        <el-form-item label="薪资" :label-width="formLabelWidth">
          <el-input
            v-model="editPositionForm.psalary"
            autocomplete="off"
            style="width: 120px"
          ></el-input>
        </el-form-item>
        <el-form-item label="岗位描述" :label-width="formLabelWidth">
          <el-input
            v-model="editPositionForm.pdesc"
            autocomplete="off"
            style="width: 120px"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogEditFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editPosition">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "RecommendPositionrelease",

  data() {
    return {
      searchVal: "",
      dialogAddFormVisible: false,
      dialogEditFormVisible: false,
      formLabelWidth: "120px",
      loading: true,
      pages: 0,
      total: 0,
      //   分页参数
      pageInfo: {
        current: 1,
        pageSize: 6,
      },
      //   搜索参数
      searchObj: {
        searchParams: "",
        current: 1,
        pageSize: 6,
      },
      // 添加职位表单
      addPositionForm: {
        name: "",
        pdesc: "",
        pnumbers: "",
        paddress: "",
        peducation: "",
        psalary: "",
        company: "",
      },
      // 编辑表单
      editPositionForm: {
        pid: "",
        hid: "",
        name: "",
        pdesc: "",
        pnumbers: "",
        paddress: "",
        peducation: "",
        psalary: "",
        company: "",
      },
      // 编辑和删除后台条件参数
      editAndDeleteObj: {
        pid: 0,
      },
      // 表格数据
      tableData: [],
    };
  },

  mounted() {
    this.queryBypageAll();
  },

  //   侦听器
  watch: {
    //   如果表格里面有数据就关闭加载中
    tableData: function (newVal) {
      if (newVal.length > 0) {
        this.loading = false;
      }
    },
  },

  methods: {
    // 分页查询职业
    queryBypageAll() {
      this.$axios
        .post("/position/queryPositionByHid", this.pageInfo)
        .then((res) => {
          if (res.data.result.list != null) {
            this.tableData = res.data.result.list;
            this.total = res.data.result.totalCounts;
          } else {
            return;
          }
        })
        .catch((error) => {
          console.log(error);
          this.$message({
            message: "系统错误!!!",
            type: "error",
          });
        });
    },
    // 点击分页
    clickQueryByPage(current) {
      this.pageInfo.current = current;
      //    刷新数据
      this.queryBypageAll();
    },
    // 弹出添加职位对话框
    popAddForm() {
      this.dialogAddFormVisible = true;
    },
    // 添加职位方法
    addPosition() {
      this.$axios
        .post("/position/addOnePosition", this.addPositionForm)
        .then((res) => {
          var response = res.data.desc;
          if (response === "添加失败") {
            this.$message({
              message: "亲,添加失败,请重新试一下呢",
              type: "error",
            });
          } else if (response === "添加成功") {
            this.$message({
              message: "添加成功",
              type: "success",
            });
            // 关闭对话框
            this.dialogAddFormVisible = false;
            // 重新加载数据
            this.queryBypageAll();
          }
        })
        .catch((error) => {
          console.log(error);
          this.$message({
            message: "系统错误!!!",
            type: "error",
          });
        });
    },
    // 搜索职位
    searchPosition() {
      // 如果无输入不能搜索
      if (this.searchVal === "") {
        this.$message({
          message: "输入框无内容",
          type: "error",
        });
        return;
      }
      this.searchObj.searchParams = this.searchVal;
      this.$axios
        .post("/position/queryPositionByName", this.searchObj)
        .then((res) => {
          if (res.data.result.list != null) {
            this.tableData = res.data.result.list;
            this.total = res.data.result.totalCounts;
          } else {
            return;
          }
        })
        .catch((error) => {
          console.log(error);
          this.$message({
            message: "系统错误!!!",
            type: "error",
          });
        });
    },
    // 打开编辑对话框,加载单条数据
    handleEdit(index, row) {
      console.log(index, row);
      this.editPositionForm = row;
      this.dialogEditFormVisible = true;
    },
    // 编辑方法
    editPosition() {
      this.$axios
        .post("/position/editPosition", this.editPositionForm)
        .then((res) => {
          var response = res.data.desc;
          if (response === "编辑失败") {
            this.$message({
              message: "亲,编辑失败请再试一下呢",
              type: "error",
            });
            return;
          } else if (response === "编辑成功") {
            this.$message({
              message: "编辑成功",
              type: "success",
            });
            // 关闭对话框
            this.dialogEditFormVisible = false;
            // 刷新数据
            this.queryBypageAll();
          }
        })
        .catch((error) => {
          console.log(error);
          this.$message({
            message: "系统错误!!!",
            type: "error",
          });
        });
    },
    // 删除方法
    handleDelete(index, row) {
      console.log(index, row);
      this.editAndDeleteObj.pid = row.pid;
      this.$axios
        .post("/position/deletePosition", this.editAndDeleteObj)
        .then((res) => {
          var response = res.data.desc;
          if (response === "输出失败") {
            this.$message({
              message: "亲,删除失败,请重试一下呢",
              type: "error",
            });
            return;
          } else if (response === "删除成功") {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            //   刷新数据
            this.queryBypageAll();
          }
        })
        .catch((error) => {
          console.log(error);
          this.$message({
            message: "系统错误!!!",
            type: "error",
          });
        });
    },
  },
};
</script>

<style scoped>
.campus-enterprise-hearder {
  width: 1150px;
  height: 80px;
  float: left;
  margin: 0px;
  padding: 0px;
}

.campus-enterprise-hearder-form {
  margin: 20px 20px;
}

.campus-enterprise-table {
  margin-left: 15px;
}

.campus-enterprise-hearder-add {
  margin-left: 670px;
}

.campus-enterprise-page {
  margin: 10px 300px;
}
</style>
